<template>
	<div class="login-wrap" id="login_box">
		<!--<div class="ms-title">后台管理系统</div>-->
		<div class="ms-login">
			
			<el-form :model="modelData" label-width="0px" class="demo-ruleForm">
				<img class="top_line" src="../../../../../static/img/line.png"/>
				<div class="log_title">招募圈管理系统</div>
				<div class="info_part">
					<el-form-item prop="username" class="input_box">
					<img class="img_icon" src="../../../../../static/img/user.png" />
					<el-input v-model="modelData.userCount" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item prop="password" class="input_box">
					<img class="img_icon" src="../../../../../static/img/pwd.png" />
					<el-input type="password" placeholder="请输入密码" v-model="modelData.password" @keyup.enter.native="submitForm('modelData')"></el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitForm()">登录</el-button>
				</div>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	import service from '../../../../js/common/userservice.js'
	export default {
		data() {
			return {
				defaultbg: require('../../../../assets/loginbg.png'), //背景
				modelData: {
					userCount: 'kefu_guangzhou',
					password: '123456'
				},
				
			}
		},
		methods: {
			submitForm() {
				service.login(this, this.modelData);
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background: url('../../../../assets/loginbg.png');
		background-size: cover;
	}
	
	#login_box {
		.ms-title {
			position: absolute;
			top: 50%;
			width: 100%;
			margin-top: -230px;
			text-align: center;
			font-size: 30px;
			color: #fff;
		}
		.log_title {
			text-align: center !important;
			color: #409eff;
			font-size: 20px;
			padding-bottom: 30px;
			font-weight: bold;
			letter-spacing: 3px;
		}
		.ms-login {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			/*width: 390px;
    		height: 240px;*/
			/*margin: -150px 0 0 -190px;*/
			/*width: 622px;
    		height: 460px;*/
			/*padding: 30px;*/
			padding-bottom:20px;
			border-radius: 5px;
			background: #fff;
			box-shadow: 0 0 8px #409eff;
		}
		.input_box {
			position: relative;
			
		}
		.login-btn {
			padding-top: 20px;
			text-align: center;
		}
		.login-btn button {
			width: 100%;
			height: 36px;
		}
	}
</style>